<!-- 导航 -->
    {% load static %}
    <div class="wrapper-pro">
        <div class="left-sidebar-pro">
            <nav id="sidebar">
                <div class="sidebar-header">
                    <a href="#"><img src="{% static "img/message/1.png" %}" alt="" />
                    </a>
                    <h3>知识与你分享</h3>
                    <p>Study Day Day Up</p>
                    <strong>UP</strong>
                </div>
                <div class="left-custom-menu-adp-wrap">
                    <ul class="nav navbar-nav left-sidebar-menu-pro">
                        <li class="nav-item"><a href="/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-home"></i> <span class="mini-dn">个人主页</span></a></li>
                        <li class="nav-item"><a href="/list/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-envelope"></i> <span class="mini-dn">最新文章</span></a></li>
                        <li class="nav-item"><a href="/hotnews/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-flask"></i> <span class="mini-dn">热榜文章</span></a></li>
                        <li class="nav-item"><a href="/photo/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-files-o"></i> <span class="mini-dn">图片专区</span></a></li>
{#                        <li class="nav-item"><a href="/video/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-pie-chart"></i> <span class="mini-dn">视频专区</span></a></li>#}
                        <li class="nav-item"><a href="/write/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-bar-chart-o"></i> <span class="mini-dn">欢迎投稿</span></a></li>
                        <li class="nav-item"><a href="/contact/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-edit"></i> <span class="mini-dn">意见反馈</span></a></li>
{#                        <li class="nav-item"><a href="/about/" class="nav-link dropdown-toggle"><i class="fa big-icon fa-desktop"></i> <span class="mini-dn">同心战疫</span></a></li>#}
                    </ul>
                </div>
            </nav>
        </div>
    </div>
        <!-- 左侧栏 -->
        <!-- 导航栏 -->
        <div class="content-inner-all">
            <div class="header-top-area">
                <div class="fixed-header-top">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-1 col-md-6 col-sm-6 col-xs-12">
                                <button type="button" id="sidebarCollapse" class="btn bar-button-pro header-drl-controller-btn btn-info navbar-btn">
                                    <i class="fa fa-bars"></i>
                                </button>
                                <div class="admin-logo logo-wrap-pro">
                                    <a href="#"><img src={% static "img/logo/log.png" %} alt="" />
                                    </a>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-1 col-sm-1 col-xs-12">
                                <div class="header-top-menu tabl-d-n">
                                    <ul class="nav navbar-nav mai-top-nav">
                                        <li class="nav-item"><a href="/news/后端" class="nav-link">后端</a>
                                        </li>
                                        <li class="nav-item"><a href="/news/前端" class="nav-link">前端</a>
                                        </li>
                                        <li class="nav-item"><a href="/news/移动开发" class="nav-link">移动开发</a>
                                        </li>
                                        <li class="nav-item"><a href="/news/Python" class="nav-link">Python</a>
                                        </li>
                                        <li class="nav-item dropdown">
                                            <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">更多<span class="angle-down-topmenu"><i class="fa fa-angle-down"></i></span></a>
                                            <div role="menu" class="dropdown-menu animated flipInX">
                                                <a href="/news/Java" class="dropdown-item">Java</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                                <div class="header-right-info">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="margin-top: 2.5%;margin-left: 10%;">
                                        <div class="breadcome-heading">
												<span><input type="text" placeholder="搜索文章..." class="form-control" id="searchnews" onkeypress="if(event.keyCode==13) search()">
                                                <button class="BU" id="searchnews" onclick="search()"><i class="fa fa-search" style="color: white"></i></button></span>
                                        </div>
                                    </div>
                                    {% if username %}
                                    <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                        <li class="nav-item">
                                            <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">
                                                <span class="contact-client-img">
                                                    <img id="avatarimg" src="{% static userinfo.profile.avatar.url %}" width="30" height="30" alt="">
                                                </span>
                                                <span class="admin-name">{{ username }}</span>
                                                <span class="author-project-icon adminpro-icon adminpro-down-arrow"></span>
                                            </a>
                                            <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated flipInX">
                                                <li><a href="/userinfo/"><span class="adminpro-icon adminpro-user-rounded author-log-ic"></span>个人信息</a>
                                                </li>
                                                <li><a href="/collect/"><span class="adminpro-icon adminpro-home-admin author-log-ic"></span>我的收藏</a>
                                                </li>
                                                <li><a href="/admin/"><span class="adminpro-icon adminpro-settings author-log-ic"></span>后台管理</a>
                                                </li>
                                                <li><a href="/modifypwd/"><span class="adminpro-icon adminpro-money author-log-ic"></span>修改密码</a>
                                                </li>
                                                <li><a href="/logout/"><span class="adminpro-icon adminpro-locked author-log-ic"></span>注销</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    {% else %}
                                    <ul class="nav navbar-nav mai-top-nav header-right-menu">
                                        <li class="nav-item">
                                            <a href="#" data-toggle="dropdown" role="button" aria-expanded="false" class="nav-link dropdown-toggle">
                                                <span class="adminpro-icon adminpro-user-rounded header-riht-inf"></span>
                                                <span class="admin-name">请登录</span>
                                                <span class="author-project-icon adminpro-icon adminpro-down-arrow"></span>
                                            </a>
                                            <ul role="menu" class="dropdown-header-top author-log dropdown-menu animated flipInX">
                                                <li><a href="/login/"><span class="adminpro-icon adminpro-home-admin author-log-ic"></span>登录</a>
                                                </li>
                                                <li><a href="/register/"><span class="adminpro-icon adminpro-user-rounded author-log-ic"></span>注册</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!-- 响应式导航栏 -->
            <div class="mobile-menu-area">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="mobile-menu">
                                <nav id="dropdown">
                                    <ul class="mobile-menu-nav">
                                        <li><a data-toggle="collapse" data-target="#Charts" href="/"><i class="fa big-icon fa-home"></i>&nbsp;&nbsp;主 页 <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a></li>
                                        <li><a data-toggle="collapse" data-target="#demo" href="/"><i class="fa big-icon fa-envelope"></i>&nbsp;&nbsp;文章专区 <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                            <ul id="demo" class="collapse dropdown-header-top">
                                                <li><a href="/list/"><i class="fa fa-comments"></i>&nbsp;&nbsp;最新文章</a></li>
                                                <li><a href="/hotnews/"><i class="fa big-icon fa-flask"></i>&nbsp;&nbsp;热榜文章</a></li>
                                                <li><a href="/photo/"><i class="fa big-icon fa-files-o"></i>&nbsp;&nbsp;图片专区</a></li>
{#                                                <li><a href="/video/"><i class="fa big-icon fa-pie-chart"></i>&nbsp;&nbsp;视频专区</a></li>#}
                                            </ul>
                                        </li>
                                        <li><a data-toggle="collapse" data-target="#Tablesmob" href="/write/"><i class="fa big-icon fa-bar-chart-o"></i>&nbsp;&nbsp;欢迎投稿 <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        </li>
                                        <li><a data-toggle="collapse" data-target="#formsmob" href="/contact/"><i class="fa big-icon fa-table"></i>&nbsp;&nbsp;意见反馈 <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        </li>
                                        <li><a data-toggle="collapse" data-target="#Pagemob" href="/about/"><i class="fa big-icon fa-desktop"></i>&nbsp;&nbsp;同心战疫 <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span></a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
